<template>
    <div class="person">
        <h1>监视：情况三</h1>
        <h1>当前姓名为：{{ person.name }}</h1>  <!-- 此处不用.value -->
        <h1>当前年龄为：{{ person.age }}</h1>
        <button @click="changeName">改变姓名</button>
        <button @click="changeAge">改变年龄</button>
        <button @click="changePerson">改变整个人</button>
    </div>
</template>


<script lang="ts" setup name="Person">
    import {reactive,watch} from "vue"
    //数据
    let person = reactive(
        {
            name : 'zhang-san',
            age : 18
        }
    )
    //方法
    function changeName(){
        person.name += "三"
    }
    function changeAge(){
        person.age += 1
    }
    function changePerson(){
        person = {name:"li-si",age:19}
    }
    const stopWatch = watch(person,(newValue,oldValue)=>{
        console.log(newValue,oldValue)
        }
    )
    
</script>

<style scoped>
    .person{
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button{
        margin: 0 5px;
    }
</style>